<template>
    <div class="">
        <el-form :inline="true">
            <div style="display: flex; justify-content: space-between;">
                <div>
                    <el-form-item style="margin-right:20px;">
                        <label>状态：</label>
                        <el-select v-model="state" placeholder="状态" @change="init">
                            <el-option label="全部" :value="-1" />
                            <el-option label="有效" :value="1" />
                            <el-option label="置顶" :value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="init">查询</el-button>
                    </el-form-item>
                </div>
                <div>
                    <el-button type="primary" @click="batchDelete">批量删除</el-button>
                </div>
            </div>
        </el-form>
        <el-form :inline="true">
            <div style="margin-bottom: 10px;font-weight: bold;">商品名称 : {{ goodsname }}</div>
        </el-form>
        <el-table v-loading="listLoading" :data="tableData" border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="60" align="center" />
            <el-table-column prop="userid" label="用户ID" width="80" align="center" />
            <el-table-column prop="headpic" label="头像" width="60" align="center">
                <template slot-scope="{row}">
                    <div class="flex">
                        <el-avatar :size="40" :src="row.headpic" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" width="180" align="center" />
            <el-table-column prop="content" label="评论内容" align="center" />
            <el-table-column prop="picurl" label="图片" width="140" align="center">
                <template slot-scope="{row}">
                    <el-image style="width: 80px; height: 80px" :src="row.picurl" :preview-src-list="[row.picurl]" />
                </template>
            </el-table-column>
            <el-table-column prop="gvalue" label="评分" width="250" align="center">
                <template slot-scope="{row}">
                    <el-rate v-model="row.gvalue" disabled show-text text-color="#000"></el-rate>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="140" align="center">
                <template slot-scope="{row}">
                    <el-tag type="danger" v-if="row.state == 0">删除</el-tag>
                    <el-tag type="success" v-if="row.state == 1">有效</el-tag>
                    <el-tag type="warning" v-if="row.state == 2">置顶</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="ctime" show-overflow-tooltip label="评论时间" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.ctime.replace("T", " ") }}</span>
                </template>
            </el-table-column>
        </el-table>

        <div class="block " style="padding-top: 20px;">
            <el-pagination background :current-page="PageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                @size-change="idx => { pageSize = idx }" @current-change="idx => { PageIndex = idx }" />
        </div>
        <el-dialog title="操作审核" :visible.sync="dialogVisible" width="40%" @closed="handleClose()">
            <el-form ref="forms" :rules="rulesModel" :model="from" label-width="80px">
                <el-form-item label="审核结果" prop="checkResult">
                    <el-radio-group v-model="from.checkResult">
                        <el-radio :label="true">通过</el-radio>
                        <el-radio :label="false">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="!from.checkResult" label="备注说明">
                    <el-input v-model="from.noPassRemark" placeholder="请输入备注说明" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { CommentByGoods, deleteComment } from '@/api/goods.js'
import { formatDate } from '@/utils/index.js'
export default {
    name: 'Name',
    data() {
        return {
            state: -1, // 状态查询


            gid: 0, // 商品id
            goodsname: '', // 商品名称
            listLoading: false,
            tableData: [],
            totalCount: 0,
            PageIndex: 1,
            pageSize: 10,

            checkList: [], // 批量删除评论id列表

            dialogVisible: false,
            currentUserID: -1,
            userInfo: {},
            from: {},
            rulesModel: {
                checkResult: [
                    { required: true, message: '请选择审核结果', trigger: 'blur' }
                ]
            },
        }
    },
    watch: {
        PageIndex(val) {
            console.log(val)
            this.getData()
        },
        pageSize(val) {
            console.log(val)
            this.getData()
        }
    },
    created() {
        this.gid = this.$route.query.gid || 0
        this.goodsname = this.$route.query.goodsname || ''
    },
    async mounted() {
        this.getData()
    },
    methods: {
        /////////////////////////////////////////////////// 初始化 ////////////////////////////////////////////////
        /**初始化 */
        async init() {
            this.PageIndex = 1;
            this.getData();
        },
        // 关闭前
        handleClose() {
            this.$refs.forms.clearValidate()
        },
        // 打开前
        async onVisible(item) {
            console.log(item);
            this.form = {
                registerID: -1,
                checkResult: false,
                noPassRemark: ""
            }
            this.from.registerID = item.registerID;
            this.dialogVisible = true
        },
        /**多选监听 */
        handleSelectionChange(val) {
            if (val) {
                this.checkList = val;
                console.log(this.checkList);
            }
        },
        /**获取主列表 */
        async getData() {
            this.listLoading = true
            const { list, totalCount, success, msg } = await CommentByGoods({
                gid: this.gid,
                state: this.state
            })
            this.totalCount = totalCount
            this.tableData = list
            console.log('评论列表，', list)
            this.listLoading = false
        },
        /**批量删除 */
        async batchDelete() {
            if (this.checkList.length == 0) {
                this.$message({
                    message: '请勾选需要删除的评论',
                    type: 'error'
                });
                return;
            }
            const { success, msg } = await deleteComment(this.checkList.map(item => { return item.id }))
            if (success) {
                this.getData()
            } else {
                this.$message({
                    message: msg,
                    type: success ? 'success' : 'error'
                })
            }
        },
        /**审核提交 */
        async submit() {
            try {
                await this.$refs['forms'].validate()
            } catch (e) {
                console.log(e)
                return
            }
            console.log('审核参数:', this.from);
            const { success, msg } = await CheckMerchantRegister(this.from)
            if (success) {
                this.dialogVisible = false;
                this.getData()
            } else {
                this.$message({
                    message: msg,
                    type: success ? 'success' : 'error'
                })
            }
        },
    }
}
</script>
  
<style lang="scss" scoped></style>
<style lang="scss">
.el-table .warning-row {
    background: oldlace;
}
</style>
  